<template>
  <a-modal v-model:visible="showModal" :mask-closable="false" title="修改密码" @cancel="onClose" width="45vw" unmount-on-close>
    <a-alert>
      <template #icon>
        <icon-exclamation-circle />
      </template>
      密码8~16位，支持数字、字母、特殊符号(!~_%$&*)、区分大小写</a-alert
    >
    <page-form :model="form" ref="formRef" :rules="rules" div="true" class="page-form" layout="vertical">
      <div>
        <page-form-item field="oldPassword" label="原密码" style="width: 70%">
          <a-input-password v-model="form.oldPassword" placeholder="请输入" allow-clear />
        </page-form-item>
      </div>
      <page-form-row>
        <page-form-item field="newPassword" label="新密码" size="1/2">
          <a-input-password v-model="form.newPassword" placeholder="请输入" allow-clear />
        </page-form-item>

        <page-form-item label="确认新密码" field="surePassword" size="1/2">
          <a-input-password v-model="form.surePassword" placeholder="请输入" allow-clear />
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="submitFn" :ok-loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { editPassword } from '@/api/user'
  import customInputPassword from '@/components/input/custom-input-password.vue'
  const form = ref({})
  const showModal = ref(false)

  const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!~_%&*(),.@#$^])[\da-zA-Z!~_%&*/(),.@#$^]{8,16}$/

  const validatorPassword = (value, callback) => {
    if (value) {
      if (reg.test(value)) {
        callback()
      } else {
        callback('输入格式错误')
      }
    }
  }

  const validatorTwoPassword = (value, callback) => {
    if (value) {
      if (form.value.newPassword) {
        if (form.value.newPassword != value) {
          callback('确认密码与新密码不一致，请重新输入')
        } else {
          callback()
        }
      }
    }
  }

  const rules = {
    oldPassword: [
      { required: true, message: '请输入' },
      { required: true, validator: validatorPassword },
    ],
    newPassword: [
      { required: true, message: '请输入' },
      { required: true, validator: validatorPassword },
    ],
    surePassword: [
      { required: true, message: '请输入' },
      { required: true, validator: validatorTwoPassword },
    ],
  }
  const show = () => {
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
    form.value = {}
  }

  const formRef = ref(null)
  const okLoading = ref(false)
  const submitFn = () => {
    formRef.value.validate((error) => {
      console.log(error)
      if (!error) {
        const param = {
          ...form.value,
        }
        editPassword(param).then((res) => {
          if (res.code == 200) {
            Message.success('操作成功')
            onClose()
          }
        })
      }
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
